<template>
	<view class="u-m-b-100 u-p-b-130">
		<view class="u-m-30 combox">
			<view class="f-w f-w">
				{{info.goodsName || ''}}
			</view>
			<view class="u-wdd-100 u-m-t-20 u-m-b-20">
				<u-swiper :height="200" :list="banList" keyName="url" showTitle :autoplay="false" circular></u-swiper>
			</view>
			<view class="u-flex u-flex-between">
				<view class="">
					<view>
						<text class="f-w u-color u-font-19 u-m-r-15">￥{{info.merchantPrice}} </text>
					</view>
					<view>
						<text class="c-666" style="text-decoration: line-through;">门市价¥{{info.marketPrice}}</text>
					</view>
					<!-- <view class="u-wd-60 text-center b-r-5 u-m-t-20" style="border: 1px solid #fe3b0f;">
						抵¥4.0
					</view> -->
				</view>
				<view class="">
					<view class="c-999">
						库存：{{info.stockCount}}
					</view>
					<view class="u-m-t-20">
						<u-number-box v-model="value" class="u-flex">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 20px;text-align: center;font-size: 12px;" class="input">{{value}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
			<view class="u-border-top u-flex u-flex-between u-m-t-20 u-p-t-30 c-333">
				<view>
					须知<text class="u-m-l-20">{{info.useTime}}</text>
				</view>
				<view>
					销量：{{info.virtualSalesCount + info.salesCount}}
				</view>
			</view>
		</view>
		<view class="combox u-m-30">
			<view class="u-font-17 f-w">
				适用门店
			</view>
			<view class="">
				<view class="good-list ">
					<view class="good-li" :key="good.id" v-for="good in shopDataList"
						>
						<image class="good-img" :src="good.headImage" mode="widthFix" />
						<view class="flex-item u-flex u-flex-between relative">
							<view>
								<view class="u-font-17 f-w u-line-1  c-000">{{good.merchantName}}</view>
								<view class="u-font-21 u-m-t-10 u-m-b-10">{{good.useTime}}</view>
							</view>
							<view class="text-center" @click="onPhone(good)">
								<image src="../../static/images/phone.png" mode="" class="u-wd-25 u-he-25 "></image>
								<view class="u-font-24">联系商家</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="combox u-m-30">
			<view class="u-font-17 f-w u-m-b-20">
				套餐内容
			</view> 
			<view class="u-flex u-flex-between" v-for="(item,index) in packageContent" :key="index">
				<view class="u-font-28 c-333">
					{{item.name }}
				</view>
				<view class="">
					<text class="u-font-25 c-999">（{{item.num}}份）</text> <text class="u-font-22 c-999">￥</text> <text
						class="c-333 f-w">{{item.money}}</text>
				</view>
			</view>
		</view>
		<view class="combox u-m-30">
			<view class="u-font-17 f-w">
				温馨提示
			</view>
			<view class="u-font-30 u-m-t-20">
				{{info.useNotice}}
			</view>
		</view>
		<view class="footbuy u-he-60 u-border-top u-flex u-flex-y-center u-flex-between u-p-l-30 u-p-r-30">
			<view class="u-flex">
				<view class="text-center u-m-r-30">
					<image src="../../static/images/home.png" mode="" class="u-wd-25 u-he-25 "></image>
					<view class="u-font-24">首页</view>
				</view>
				<view class="text-center u-m-r-30" @click="handlecollect()">
					<image :src="info.collectStatus == 0?require('../../static/images/collect0.png'):require('../../static/images/collect1.png')" mode="" class="u-wd-25 u-he-25 "></image>
					<view class="u-font-24">收藏</view>
				</view>
			</view>
			<view class="u-font-12">
				合计：<text class="u-color u-font-18">¥{{ (value *info.merchantPrice).toFixed(2) }} </text>
			</view>
			<view class="bg-gradual-orange b-r-20 u-wd-100 u-he-35 text-center u-lihe-35" @click="handleplaceOrder">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				banList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				value: 1,

				id: "",
				info: {},
				shopDataList:[],
				packageContent:[],
				collectType:0
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getGoodInfo()
		},
		methods: {
			
			handleplaceOrder(){
				let data = {
					orderType:0,
					goodsId:this.id,
					totalMoney:(this.value * this. info.merchantPrice).toFixed(2),
					totalNum:this.value
				}
				this.$api.placeOrderApi(data).then(res=>{
					uni.showToast({
						title:'购买成功',
						icon: 'none'
					});
					setTimeout(()=>{
						uni.$u.route('pages/order/order');
					},1000)
				})
			},
			handlecollect(){
				let  data = {
					type:this.info.collectStatus = this.info.collectStatus == 0?1:0,
					goodsId:this.id
				}
				
				this.$api.collectApi(data).then(res => {
					uni.showToast({
						title:this.info.collectStatus == 0?'取消收藏成功': '收藏成功',
						icon: 'none' 
					});
					this.getGoodInfo()
				})
			},
			getGoodInfo() {
				this.$api.getGoodInfoApi(this.id).then(res => {
					this.info = res.data
					this.banList = this.info.goodsImages
					this.shopDataList = this.info.shopList
					this.packageContent = JSON.parse(this.info.packageContent) 
					
				})
			},
			onPhone(goods) {
				uni.makePhoneCall({
					phoneNumber: goods.contactsTel
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footbuy {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}

	.minus {
		width: 22px;
		height: 22px;
		background-color: #e7e7e7;
		border-radius: 10rpx;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #ff6767;
		border-radius: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.good-list {
		.good-li {
			display: flex;
			align-items: center;
			padding: 20upx;
			padding-bottom: 0;

			.good-img {
				width: 160upx;
				height: 160upx;
				margin-right: 20rpx;

			}

			.flex-item {
				flex: 1;



				.good-price {
					font-size: 26upx;
					color: red;
				}

				.good-sold {
					font-size: 24upx;
					color: gray;
					text-decoration: line-through;
				}

			}
		}
	}
</style>